<template>
  <div class="page-content">
    <div class="page-header">
      <img src="../assets/ruix-logo.png" class="ruix-logo" />
      <div class="logout-class" @click="onBack">Log Out</div>
    </div>
    <div class="content-class">
      <div class="tips-class">
        <img src="../assets/search-icon.png" class="search-icon" />
        <div>S/N“{{ serialNumber }}”Search Results</div>
      </div>
      <div class="content-item" style="margin-top: 50px">
        <div class="content-board" style="width: 687px">
          <div class="board-title">Basic Information</div>
          <div class="board-item">
            <div class="item-title">Device Brand</div>
            <div class="item-text">Ruix</div>
          </div>
          <div class="board-item">
            <div class="item-title">Device Model</div>
            <div class="item-text">PanShi S1</div>
          </div>
          <div class="board-item">
            <div class="item-title">Serial No.</div>
            <div class="item-text">{{ serialNumber }}</div>
          </div>
          <div class="board-item">
            <div class="item-title">Manufacture Date</div>
            <div class="item-text">
              <!-- {{ ManufactureDate }} -->
              09/03/2025
            </div>
          </div>
          <div class="board-item">
            <div class="item-title">Manufacture Factory</div>
            <div class="item-text">Guangzhou（Code 013）</div>
          </div>
          <div class="board-item">
            <div class="item-title">Verification Status</div>
            <div class="item-text">
              <img class="success-icon" src="../assets/success-icon.png" alt="" />
              <div>Genuine Device</div>
            </div>
          </div>
          <div class="board-item">
            <div class="item-title">Warranty Status</div>
            <div class="item-text">
              Under Warranty (Warranty Expiry:
              <!-- {{ WarrantyStatus }} -->
              09/03/2026 )
            </div>
          </div>
        </div>
        <div style="width: calc(1350px - 687px); text-align: center">
          <img class="device-img" src="../assets/images/device_1.png" alt="" />
        </div>
      </div>
      <div class="content-item" style="margin-top: 20px">
        <div class="content-board" style="width: 100%">
          <div class="board-title">Form Factor & Dimensions</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Case Type</div>
              <div class="item-text">Micro Tower</div>
            </div>
            <div class="board-item">
              <div class="item-title">Dimensions</div>
              <div class="item-text">Height: 13.8 inches Depth: 11.6 inches Width: 6.7 inches</div>
            </div>
          </div>
          <div class="board-title">Peripherals</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Keyboard</div>
              <div class="item-text">Full-size US English layout</div>
            </div>
            <div class="board-item">
              <div class="item-title">Mouse</div>
              <div class="item-text">Optical with Scroll Button</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item" style="margin-top: 20px">
        <div class="content-board" style="width: 100%">
          <div class="board-title">Host Information</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Motherboard Model</div>
              <div class="item-text" style="width: 250px">Ruix PanShi S1</div>
            </div>
            <div class="board-item">
              <div class="item-title">Memory</div>
              <div class="item-text" style="width: 250px">8GB DDR4</div>
            </div>
            <div class="board-item">
              <div class="item-title">Graphics</div>
              <div class="item-text" style="width: 250px">Intel i3 8100 integrated graphics</div>
            </div>
          </div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Processor (CPU)</div>
              <div class="item-text" style="width: 250px">Intel Core i3-8100 (4 Cores/4 Threads, 3.6GHz)</div>
            </div>
            <div class="board-item">
              <div class="item-title">Solid-State Drive</div>
              <div class="item-text" style="width: 250px">512GB</div>
            </div>
          </div>
          <div class="board-title">Monitor Information</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Monitor Model</div>
              <div class="item-text" style="width: 250px">VIEWG</div>
            </div>
            <div class="board-item">
              <div class="item-title">Screen Size</div>
              <div class="item-text" style="width: 250px">21.5 inches</div>
            </div>
            <div class="board-item">
              <div class="item-title">Resolution</div>
              <div class="item-text" style="width: 250px">1920 x 1080 (Full HD)</div>
            </div>
          </div>
          <div class="board-title">System Information</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Operating System</div>
              <div class="item-text">Windows 11 Pro 64-bit</div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-item" style="margin-top: 20px">
        <div class="content-board" style="width: 100%">
          <div class="board-title">I/O Ports (Front & Back)</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">USB Ports</div>
              <div class="item-text" style="width: 250px; display: block">
                <div>4 USB 2.0 ports</div>
                <div>2 USB 3.0 ports</div>
                <div>1 USB 3.0 Type-C port</div>
              </div>
            </div>
            <div class="board-item">
              <div class="item-title">Video Outputs</div>
              <div class="item-text" style="width: 250px; display: block">
                <div>1 HDMI port</div>
                <div>1 VGA port</div>
              </div>
            </div>
            <div class="board-item">
              <div class="item-title">Other Ports</div>
              <div class="item-text" style="width: 250px; display: block">
                <div>1 RJ-45 Ethernet port</div>
                <div>2 PS/2 ports</div>
                <div>1 AC power port (with British plug)</div>
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Audio</div>
              <div class="item-text">1 headphone/microphone combo jack</div>
            </div>
          </div>
          <div class="board-title">Other Information</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Expansion Slots</div>
              <div class="item-text" style="width: fit-content">
                Includes a multi-format digital media reader (supports SD+TF+MS+CF cards)
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Network</div>
              <div class="item-text">802.11ac (or better) Wi-Fi capability</div>
            </div>
          </div>
        </div>
      </div>

      <div class="content-item" style="margin-top: 20px">
        <div class="content-board" style="width: 100%">
          <div class="board-title">Additional Information</div>
          <div style="display: flex">
            <div class="board-item">
              <div class="item-title">Device Batch Number</div>
              <div class="item-text" style="width: 250px">
                <!-- BATCH-{{ DeviceBatchNumber }} -->
                BATCH-202503-13
              </div>
            </div>
            <div class="board-item">
              <div class="item-title">Upgrade Suggestions</div>
              <div class="item-text" style="width: 280px; display: block">
                <div>Memory: Supports DDR4 Expansion</div>
                <div>Storage: Supports NVMe SSD Expansion</div>
              </div>
            </div>
            <div class="board-item">
              <div class="item-title">Warranty Policy</div>
              <div class="item-text" style="width: 250px">1-Year Whole Unit Warranty</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { useRouter, useRoute } from "vue-router";
import { reactive, defineComponent, toRefs, onMounted } from "vue";
export default defineComponent({
  components: {},
  setup() {
    const dataProps = reactive({
      serialNumber: "",
      ManufactureDate: "",
      WarrantyStatus: "",
      DeviceBatchNumber: "",
    });
    const router = useRouter();
    const route = useRoute();

    onMounted(() => {
      console.log(route);
      dataProps.serialNumber = route.query.serialNumber as string;

      var year = dataProps.serialNumber.substring(4, 8);
      var month = dataProps.serialNumber.substring(8, 10);
      var day = dataProps.serialNumber.substring(10, 12);
      dataProps.ManufactureDate = `${day}/${month}/${year}`;
      dataProps.WarrantyStatus = `${day}/${month}/${Number(year) + 1}`;
      var batchNumber = dataProps.serialNumber.substring(12, 15);
      dataProps.DeviceBatchNumber = `${year}${month}-${batchNumber}`;
    });
    const onBack = () => {
      router.back();
    };
    return {
      ...toRefs(dataProps),
      onBack,
    };
  },
});
</script>
<style lang="less" scoped>
.page-content {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f7f8fa;
  .page-header {
    width: 100%;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2f333a;
    position: sticky;
    top: 0;
    height: 60px;
    .ruix-logo {
      width: 83.47px;
      height: 24px;
    }
    .logout-class {
      font-family: Inter;
      font-size: 16px;
      font-weight: 300;
      line-height: 19.36px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #fff;
      cursor: pointer;
    }
  }
  .content-class {
    width: 1358px;
    padding: 30px 50px;
    margin: auto;
    height: calc(100vh - 60px);
    overflow: scroll;
    .tips-class {
      display: flex;
      align-items: center;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #1d2129;
      .search-icon {
        width: 28px;
        height: 28px;
        margin-right: 10px;
      }
    }
    .content-item {
      display: flex;
      .content-board {
        padding: 20px;
        border-radius: 4px;
        background-color: #fff;
        .board-title {
          font-family: PingFang SC;
          font-size: 20px;
          font-weight: 500;
          line-height: 28px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          margin-bottom: 20px;
        }
        .board-item {
          display: flex;
          gap: 20px;
          align-items: flex-start;
          margin-bottom: 10px;
          .item-title {
            color: #86909c;
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            text-align: right;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            width: 146px;
            text-align: right;
          }
          .item-text {
            font-family: PingFang SC;
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #1d2129;
            display: flex;
            gap: 8px;
            align-items: center;
            width: 410px;
            .success-icon {
              width: 21px;
              height: 21px;
            }
          }
        }
      }
      .device-img {
        width: 482px;
        height: 277px;
      }
    }
  }
}
</style>
